'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export default function Home() {
  const [password, setPassword] = useState('')
  const [remember, setRemember] = useState(false)
  const [error, setError] = useState('')
  const router = useRouter()

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    try {
      console.log('Attempting login with password:', password)
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ password, remember }),
        credentials: 'include',
      })

      console.log('Login response status:', response.status)
      const data = await response.json()
      console.log('Login response data:', data)

      if (response.ok) {
        router.push('/dashboard')
      } else {
        setError(data.detail || '密码错误')
      }
    } catch (err) {
      console.error('Login error:', err)
      setError('登录失败，请重试')
    }
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
      <div className="w-full max-w-md space-y-8">
        <div className="text-center">
          <h1 className="text-4xl font-bold tracking-tight text-gray-900">
            剪贴板同步
          </h1>
          <p className="mt-3 text-lg text-gray-600">
            跨设备剪贴板同步工具
          </p>
        </div>

        {/* 下载按钮 */}
        <div className="flex flex-col items-center space-y-4">
          <div className="flex justify-center space-x-4">
            <a
              href="/downloads/clipboard-sync-setup.exe"
              className="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
            >
              <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24" fill="none">
                <path
                  d="M3 5.1L10.5 4.2V11H3V5.1ZM11.5 4.1L21 3V11H11.5V4.1ZM21 13V21L11.5 19.9V13H21ZM10.5 13V19.8L3 18.9V13H10.5Z"
                  fill="currentColor"
                />
              </svg>
              Windows 客户端
            </a>
            <a
              href="/downloads/clipboard-sync.apk"
              className="inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
            >
              <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24" fill="none">
                <path
                  d="M17.6 9.5h1.2a1.7 1.7 0 0 1 1.7 1.7v7a1.7 1.7 0 0 1-1.7 1.7h-1.2M6.4 9.5H5.2a1.7 1.7 0 0 0-1.7 1.7v7a1.7 1.7 0 0 0 1.7 1.7h1.2M17.6 9.5H6.4M17.6 9.5c0-2.8-2.5-5-5.6-5s-5.6 2.2-5.6 5M12 4.5V2.8M8.7 4.8l-1-1.7M15.3 4.8l1-1.7M9.3 16.8v-4M14.7 16.8v-4"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              Android 客户端
            </a>
          </div>
          <p className="text-sm text-gray-500">
            注意：如果 Android 安装包被浏览器下载为 .zip 文件，请手动将文件扩展名改为 .apk 后安装
          </p>
        </div>

        {/* 登录表单 */}
        <div className="mt-8 rounded-lg bg-white p-6 shadow-lg">
          <h2 className="text-center text-2xl font-bold text-gray-900">
            登录访问
          </h2>
          <form className="mt-6 space-y-6" onSubmit={handleLogin}>
            <div className="space-y-4">
              <div>
                <label htmlFor="password" className="sr-only">
                  密码
                </label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  required
                  className="relative block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  placeholder="输入密码"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>

              <div className="flex items-center">
                <input
                  id="remember"
                  name="remember"
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
                  checked={remember}
                  onChange={(e) => setRemember(e.target.checked)}
                />
                <label htmlFor="remember" className="ml-2 block text-sm text-gray-900">
                  记住我（30天）
                </label>
              </div>
            </div>

            {error && (
              <div className="text-sm text-red-600 text-center">
                {error}
              </div>
            )}

            <button
              type="submit"
              className="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              登录
            </button>
          </form>
        </div>
      </div>
    </div>
  )
} 